<template>
	<view>
		<view class="top_required">
			只展示<span style="color:#f00">必填</span>字段
			<switch :checked="isRequired" color="#008EFF" @change="changeRequired" />
		</view>
		<view class="inp_warp">
			<view class="inp_title key">标题<span>*</span></view>
			<view class="form_right">
				<input type="text" v-model="title" placeholder="填写任务标题" class="firinput">
			</view>
		</view>
		<view class="fir_warp">
			<view class="key">负责员工<span>*</span>
			</view>
			<view class="form_right" @click="toSelectStaff">
				<view :class="staffObj ? 'valueActive' : ''">{{ staffObj ? staffObj.name : '点击选择' }}</view>
				<view class="iconfont icon-you"></view>
			</view>
		</view>
		<view class="fir_warp">
			<view class="key">抄送员工<span>*</span>
			</view>
			<view class="form_right" @click="toSelectReminds">
				<view :class="RemindsObj ? 'valueActive' : ''">{{ RemindsObj ? RemindsObj.name : '点击选择' }}</view>
				<view class="iconfont icon-you"></view>
			</view>
		</view>
		<!-- <view class="fir_warp">
			<input type="text" v-model="title" placeholder="填写计划标题" class="firinput"> -->
		<!-- <view class="fir_text" @click="toTitleTemp">选择模板</view> -->
		<!-- </view> -->
		<!-- <view class="inp_warp">
			<view class="inp_title key">关联客户<span>*</span></view>
			<view class="form_right" @click="toSeleCustomer">
				<view :class="customerinfo ? 'valueActive' : '' ">
					{{customerinfo ? customerinfo.name : '选择关联客户'}}</view>
				<view class="iconfont icon-you"></view>
			</view>
		</view> -->
		<!-- <view class="inp_warp">
			<view class="inp_title key">计划类型<span>*</span></view>
			<picker @change="changeType" :range="typeList" :value="typeIndex">
				<view class="form_right">
					<view :class="typeList[typeIndex] ? 'valueActive' : '' ">
						{{typeList[typeIndex] ? typeList[typeIndex] : '选择计划类型'}}</view>
					<view class="iconfont icon-you"></view>
				</view>
			</picker>
		</view> -->
		<!-- <view class="inp_warp">
			<view class="inp_title key">服务方式<span>*</span></view>
			<picker @change="changeMode" :range="modeList" :value="modeIndex">
				<view class="form_right">
					<view :class="modeList[modeIndex] ? 'valueActive' : '' ">
						{{modeList[modeIndex] ? modeList[modeIndex] : '选择服务方式'}}</view>
					<view class="iconfont icon-you"></view>
				</view>
			</picker>
		</view> -->
		<!-- <view class="inp_warp" v-if="isShowPurposevisit">
			<view class="inp_title key">服务目的<span>*</span></view>	
			<picker @change="changeObject" :range="objectList" :value="objectIndex">
				<view class="form_right">
					<view :class="objectList[objectIndex] ? 'valueActive' : '' ">
						{{objectList[objectIndex] ? objectList[objectIndex] : '选择服务目的'}}</view>
					<view class="iconfont icon-you"></view>
				</view>
			</picker>
		</view> -->
		<view v-if="modeList[modeIndex] == '打样'">

		</view>
		<view v-else>
			<view class="inp_warp">
				<view class="inp_title key">紧要程度<span>*</span></view>
				<picker @change="changeCritical" :range="critical_list" :value="criticalIndex" :range-key="'name'">
					<view class="form_right">
						<view :class="critical_list[criticalIndex] ? 'valueActive' : ''">
							{{ critical_list[criticalIndex] ? critical_list[criticalIndex].name : '选择紧要程度' }}</view>
						<view class="iconfont icon-you"></view>
					</view>
				</picker>
			</view>
			<view class="fllow_form"
				v-if="!isRequired && (objectList[objectIndex] == '上门安装' || objectList[objectIndex] == '上门维修' || modeList[modeIndex] == '返厂维修')">
				<view class="key">指派员工<span
						v-if="objectList[objectIndex] == '上门安装' || objectList[objectIndex] == '上门维修' || modeList[modeIndex] == '返厂维修'">*</span>
				</view>
				<view class="form_right" @click="toSelectStaff">
					<view :class="staffObj ? 'valueActive' : ''">{{ staffObj ? staffObj.name : '点击选择' }}</view>
					<view class="iconfont icon-you"></view>
				</view>
			</view>
			<view class="inp_warp" v-if="modeList[modeIndex] != '返厂维修' && !isRequired">
				<view class="inp_title key">开始时间</view>
				<view class="form_right">
					<select-time-picker :disabled="false" placeholder="选择开始时间" :defaultValue="start_time"
						fields="minute" @change="changeNewStartTime" v-if="start_time"></select-time-picker>
					<view class="iconfont icon-you"></view>
				</view>
			</view>
			<view class="inp_warp"
				v-if="objectList[objectIndex] != '上门安装' && modeList[modeIndex] != '返厂维修' && !isRequired">
				<view class="inp_title key">预计结束时间</view>
				<view class="form_right">
					<select-time-picker :disabled="false" placeholder="选择结束时间" :start="limit_time"
						:defaultValue="end_time" fields="minute" @change="changeNewEndTime"
						v-if="limit_time"></select-time-picker>
					<view v-else @click="toDone">选择结束时间</view>
					<view class="iconfont icon-you"></view>
				</view>
			</view>
			<view class="inp_warp" v-if="objectList[objectIndex] == '上门安装' && !isRequired">
				<view class="inp_title key">预计结束时间</view>
				<picker @change="changeEndTime" mode="date">
					<view class="form_right">
						<view :class="end_time ? 'valueActive' : ''">
							{{ end_time ? end_time : '选择预计结束时间' }}</view>
						<view class="iconfont icon-you"></view>
					</view>
				</picker>
			</view>
			<!-- 售后服务 上门维修 -->
			<view v-if="!modeShow">
				<view class="inp_warp" v-if="!isRequired">
					<view class="inp_title" style="color:#666666">提醒</view>
					<picker @change="changeRemind" :range="remindList" :value="remindIndex">
						<view class="form_right">
							<view :class="remindList[remindIndex] ? 'valueActive' : ''">
								{{ remindList[remindIndex] ? remindList[remindIndex] : '选择提醒时间' }}</view>
							<view class="iconfont icon-you"></view>
						</view>
					</picker>
				</view>
				<view class="fllow_area" v-if="!isRequired">
					<view class="fllo_list">
						<view class="area_head">任务备注:</view>
						<!-- <view class="list_text" @click="toRemarksTemp">选择模板</view> -->
					</view>
					<textarea v-model="remark" maxlength="-1" :class="remark ? 'valueActive' : ''" placeholder="请填写备注"
						placeholder-style="color:#999" />
				</view>
			</view>
			<view v-if="objectList[objectIndex] == '上门安装' || objectList[objectIndex] == '上门维修'">
				<view class="fllow_form">
					<view class="key">客户联系人<span>*</span></view>
					<picker @change="changeContacts" :value="contactsIndex" :range="contactsList" :range-key="'name'">
						<view class="form_right">
							<view :class="contactsList[contactsIndex] ? 'valueActive' : ''">
								{{ contactsList[contactsIndex] ? contactsList[contactsIndex].name : '点击选择' }}</view>
							<view class="iconfont icon-you"></view>
						</view>
					</picker>
				</view>
				<view class="fllow_form">
					<view class="key">客户地址<span>*</span></view>
					<view class="form_right" @click="chooseAddress">
						<view :class="address ? 'valueActive' : ''">{{ address ? address : '请选择地址' }}</view>
						<view class="iconfont icon-you"></view>
					</view>
				</view>
				<view class="fllow_form">
					<view class="key">详细地址<span>*</span></view>
					<view class="form_right">
						<input type="text" :class="address_detail ? 'valueActive' : ''" v-model="address_detail"
							placeholder="请填写详细地址 " />
					</view>
				</view>
				<view class="inp_warp">
					<view class="inp_title key">产品<span>*</span></view>
					<view class="add_in" @click="seProduct">
						<view class="iconfont icon-jiahaocu"></view>
						添加产品
					</view>
				</view>
				<view class="prolist" v-if="productList.length != 0">
					<view class="probox">
						<view class="proli" v-for="(item, index) in productList" :key="index">
							<view class="product_li">
								<view class="iconfont icon-jian" @click="delProduct(index)"></view>
								<view class="protext">{{ item.product.name }}</view>
								<view class="protext">{{ item.product.price }}</view>
							</view>
							<view class="part_li" v-if="objectList[objectIndex] == '上门维修'">
								<view class="partbox" v-for="(ele, eleindex) in item.parts" :key="eleindex"
									@click="toSelectProductPart(index, eleindex)">
									<radio value="r1" color="#ff7800" :checked="ele.is_select" />{{ ele.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="objectList[objectIndex] == '上门维修'">
					<view class="inp_warp">
						<view class="inp_title key">需携带配件<span>*</span></view>
						<view class="add_in" @click="addParts">
							<view class="iconfont icon-jiahaocu"></view>
							选择配件
						</view>
					</view>
					<view class="prolist" v-if="carryPartsList.length != 0">
						<view class="probox">
							<view class="product_li" style="padding:24rpx 0;border-bottom:1rpx solid #f5f5f5;"
								v-for="(item, index) in carryPartsList" :key="index">
								<view class="iconfont icon-jian" @click="delProductParts(index)"></view>
								<view class="protext" style="text-align: center;width:160rpx">{{ item.name }}</view>
								<view>
									<uni-number-box :min="1" v-model="item.number"
										@change="(e) => { changeNumber(e, index) }" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fllow_form" v-if="objectList[objectIndex] != '上门安装'">
					<view class="key">过保类型<span>*</span></view>
					<view class="form_right">
						<radio-group class="radiowarp" @change="changeOver">
							<view class="">
								<radio value="1" color="#008EFF" :checked="is_over == 1" />过保
							</view>
							<view class="">
								<radio value="2" color="#008EFF" :checked="is_over == 2" />未过保
							</view>
						</radio-group>
					</view>
				</view>
			</view>
			<!-- 返厂维修 -->
			<view v-if="modeList[modeIndex] == '返厂维修'">
				<view class="fllow_form">
					<view class="key">机器型号<span>*</span></view>
					<view class="form_right" style="color:#008EFF" @click="toAddPart">
						<view class="iconfont icon-jiahaocu" style="color:#008EFF"></view>
						选择机器
					</view>
				</view>
				<view class="prolist" v-if="partsList.length != 0">
					<view class="probox">
						<view class="proli" v-for="(item, index) in partsList" :key="index">
							<view class="product_li">
								<view class="iconfont icon-jian" @click="delParts(index)"></view>
								<view class="protext">{{ item.product.name }}</view>
								<view class="protext">{{ item.number ? item.number : '' }}</view>
								<view class="protext">{{ item.product.price }}</view>
							</view>
							<view class="part_li">
								<view class="partbox" v-for="(ele, eleindex) in item.parts" :key="eleindex"
									@click="toSelectPart(index, eleindex)">
									<radio value="r1" color="#ff7800" :checked="ele.is_select" />{{ ele.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fllow_form">
					<view class="key">过保类型<span>*</span></view>
					<view class="form_right">
						<radio-group class="radiowarp" @change="changeOver">
							<view class="">
								<radio value="1" color="#008EFF" :checked="is_over == 1" />过保
							</view>
							<view class="">
								<radio value="2" color="#008EFF" :checked="is_over == 2" />未过保
							</view>
						</radio-group>
					</view>
				</view>
				<view class="fllow_area">
					<view class="fllo_list">
						<view class="area_head key">问题描述:<span>*</span></view>
					</view>
					<textarea v-model="desc" maxlength="-1" :class="desc ? 'valueActive' : ''" placeholder="请填写问题描述"
						placeholder-style="color:#999" />
				</view>
				<view class="fllow_area">
					<view class="fllo_list">
						<view class="area_head key">注意事项:<span>*</span></view>
					</view>
					<textarea v-model="matters" maxlength="-1" :class="matters ? 'valueActive' : ''"
						placeholder="请填写注意事项" placeholder-style="color:#999" />
				</view>
				<view class="inp_warp">
					<view class="inp_title key">要求维修完成日期<span>*</span></view>
					<select-time-picker fields="day" :start="nowTimeDate" placeholder="要求维修完成日期"
						:defaultValue="appointment_time" @change="changeSaleTime"></select-time-picker>
				</view>
				<!-- 上传附件 -->
				<upload-img :imgList="imgList" @uploadImg="uploadImg" @delImg="delImg"></upload-img>
			</view>
		</view>
		<view class="button" @click="$noMultipleClicks(toAddVisit)">提交</view>
		<view class="botsec"></view>

		<select-work-product ref="workProductOne" :customerinfo="customerinfo"
			@selectList="selectParts"></select-work-product>
		<!-- 上门安装 上门维修 选择产品 -->
		<select-work-product ref="workProductTwo" :customerinfo="customerinfo"
			@selectList="selectProduct"></select-work-product>
		<!-- 需要使用的设备名称 -->
		<uni-popup ref="partPopup" type="bottom" background-color="#fff" @touchmove.stop.prevent>
			<view class="popuptitle">设备名称</view>
			<view class="equi_box">
				<scroll-view scroll-y class="scrollbox">
					<view class="equi_list">
						<view class="equi_li" v-for="(item, index) in equipList" :key="index" @click="checkEqui(index)">
							<radio value="1" color="#008EFF" :checked="item.select" />{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<view class="bot_warp">
					<view class="bot_btn remove" @click="closeDevice">取消</view>
					<view class="bot_btn" @click="handleEquip">确定</view>
				</view>
			</view>
		</uni-popup>

		<!-- 上门维修 需要携带的配件 -->
		<select-work-parts ref="partsChild" @selectList="selectProductParts"></select-work-parts>

	</view>
</template>

<script>
import { mapState } from 'vuex'
import {
	netAddVisitplant, netPrevCustomer,
	netLoginerInfo, netProoPlan, netLianxiren
} from '@/api/api.js'
import { getNewDateArry } from '@/utils/dateTimePicker.js'
import { BASE_IMG_URL, BASE_URL, SIGN_NO } from '@/api/http.js'
import { checkStartEnd } from '@/utils/util.js'
import { commonFun } from '@/common/navigate.js'
import selectProduct from '@/components/selectProduct/index.vue'
import selectWorkProduct from '@/components/selectWorkProduct/index'
import selectTimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue'
import selectWorkParts from '@/components/selectWorkParts/index'

export default {
	mixins: [commonFun],
	components: {
		selectProduct,
		selectWorkProduct,
		selectTimePicker,
		selectWorkParts
	},
	data() {
		return {
			BASE_IMG_URL: BASE_IMG_URL,
			noClick: true,   //防止重复点击
			remindList: ['准时提醒', '5分钟前', '15分钟前', '30分钟前', '一个小时前', '两个小时前', '一天前', '两天前', '一周前'],
			remindIndex: 1,
			modeList: ['上门'],   //拜访方式
			modeIndex: null,
			isRequireTime: false,

			modeShow: false,
			isShowPurposevisit: true,
			critical_list: [    //紧要程度
				{ id: 0, name: '普通' },
				{ id: 1, name: '重要' },
				{ id: 2, name: '紧急' },
				{ id: 4, name: '重要且紧急' },
			],
			criticalIndex: 0,
			typeList: ['客户服务', '售后服务'],     //计划类型
			typeIndex: null,
			objectList: ['认识', '报价', '签合同', '收款'],    //拜访目的
			objectIndex: null,

			start_time: '',  //开始时间
			end_time: '',  //结束时间
			limit_time: '',   //限制时间参数
			title: '',
			remark: '',
			level: '',  //紧要程度
			remindtype: '',  //提醒时间
			relation_id: '',   //关联客户
			type: '',   //计划类型

			customerid: '',
			isShowStaff: false,
			//打样申请
			//打样原因
			prooreason: ['产品研发', '客户需求', '设计变更', '其他'],
			prooreasonIndex: 0,
			//样品提供
			prooprovision: ['客供', '外部采购', '其他'],
			prooprovisionIndex: 0,
			//样品来源
			isShowSource: false,
			provisio_desc: '',
			//样品处理
			prooprocess: ['返还客户', '存档保留', '报废'],
			prooprocessIndex: 0,

			application_department: '',   //申请部门
			application_name: '',   //申请人
			application_date: '',   //申请时间
			sample_name: '',   //样品名称
			sample_number: '',   //样品数量
			sample_material: '',  //样品材质
			sample_provision: '',   //样品提供
			completion_date: '',   //要求完成时间
			proofing_reason: '',   //打样原因
			device_config: '',   //设备配置
			sample_preservation: '',   //样品保存  样品处理
			accuracy: '',   //精度要求
			appearance: '',   //外观要求
			speed: '',    //速度要求
			others: '',   //其他要求
			//售后服务  返厂维修
			partsList: [],
			is_over: 1,   //1过保  2未过保
			imgList: [],
			desc: '',   //问题描述
			matters: '',  //注意事项
			appointment_time: '',   //要求完成时间
			customer_product_id: '',   //机器型号
			image: '',   //附件
			//////////////////////////////////////////////
			//客户信息   售后服务 上门安装  上门维修
			lat: '',
			lng: '',
			address: '',
			address_detail: '',
			contactsList: [],
			contactsIndex: 0,
			productList: [],
			carryPartsList: [],    //上门维修 需要携带的 配件
			//需使用 设备
			device_name: '', //设备名称
			equipList: [
				{ id: 1, name: '热熔胶机', select: false, device_config: '' },
				{ id: 2, name: '冷胶机', select: false, device_config: '' },
				{ id: 3, name: '双面胶铁头', select: false, device_config: '' },
				{ id: 4, name: '双面胶', select: false, device_config: '' }
			],
			selectDeviList: [],  //选中的设备
			nowTimeDate: '',
			isRequired: false,  //是否只展示必填字段
		}
	},
	computed: mapState({
		customerinfo: state => state.customer.customerobj,   //关联 客户
		templateTitle: state => state.template.visit_plan_title,   //标题
		templateRemark: state => state.template.visit_plan_remarks,   //备注
		staffObj: state => state.customer.staffObj,
		RemindsObj: state => state.customer.RemindsObj,
	}),
	watch: {
		templateTitle(newv, oldv) {
			this.title = newv
			//处理选中的模板
			this.handleType(newv)
		},
		customerinfo(newobj, oldobj) {
			if (newobj) {
				//获取 客户联系人
				this.getCustomerLink()
			}
		},
	},
	onLoad(options) {
		this.$store.commit('CUSTOMEROBJ', null)
		this.$store.commit('STAFFOBJ', null)
		this.$store.commit('REMINDSOBJ', null)
		if (options.customerid) {
			this.customerid = options.customerid
			//获取 默认的  关联客户
			this.getDefaultCustomer()
		}
		//当前时间
		let arr = getNewDateArry()
		this.nowTimeDate = `${arr[0]}-${arr[1]}-${arr[2]}`
		this.start_time = `${arr[0]}-${arr[1]}-${arr[2]} ${arr[3]}:${arr[4]}`
		this.limit_time = `${arr[0]}-${arr[1]}-${arr[2]} ${arr[3]}:${arr[4]}`
		//默认申请时间
		this.application_date = `${arr[0]}-${arr[1]}-${arr[2]}`
		//获取 登录者 信息
		this.getUserinfo()
	},
	onShow() {
		if (this.templateRemark) {
			this.remark += this.templateRemark
		}
	},
	onUnload() {
		this.$store.commit('VISIT_PLAN_REMARKS', '')
		this.$store.commit('VISIT_PLAN_TITLE', '')
		this.$store.commit('CUSTOMEROBJ', '')
	},
	onHide() {
		this.$refs.workProductOne.closePopup()
		this.$refs.workProductTwo.closePopup()
		this.$refs.partsChild.closePopup()
	},
	methods: {
		//切换是否只展示必填字段
		changeRequired(e) {
			this.isRequired = e.detail.value
		},
		handleType(type) {
			console.log(type, '标题', this.start_time)
			if (type == '客户服务_上门_认识') {

				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 0

				this.modeList = ['上门']  //拜访方式
				this.modeIndex = 0

				this.objectList = ['认识', '报价', '签合同', '收款']    //拜访目的
				this.objectIndex = 0
			} else if (type == '客户服务_上门_报价') {
				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 0

				this.modeList = ['上门']  //拜访方式
				this.modeIndex = 0

				this.objectList = ['认识', '报价', '签合同', '收款']    //拜访目的
				this.objectIndex = 1
			} else if (type == '客户服务_上门_签合同') {
				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 0

				this.modeList = ['上门']  //拜访方式
				this.modeIndex = 0

				this.objectList = ['认识', '报价', '签合同', '收款']    //拜访目的
				this.objectIndex = 2
			} else if (type == '客户服务_上门_收款') {
				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 0

				this.modeList = ['上门']  //拜访方式
				this.modeIndex = 0

				this.objectList = ['认识', '报价', '签合同', '收款']    //拜访目的
				this.objectIndex = 3
			} else if (type == '售后服务_上门_上门安装') {
				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 1

				this.modeList = ['上门', '电话', '返厂维修']  //拜访方式
				this.modeIndex = 0

				this.objectList = ['上门安装', '上门维修']
				this.objectIndex = 0

				this.productList = []
				this.partsList = []
			} else if (type == '售后服务_上门_上门维修') {

				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 1

				this.modeList = ['上门', '电话', '返厂维修']  //拜访方式
				this.modeIndex = 0

				this.objectList = ['上门安装', '上门维修']
				this.objectIndex = 1

				this.productList = []
				this.partsList = []
			} else if (type == '售后服务_电话') {
				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 1

				this.modeList = ['上门', '电话', '返厂维修']  //拜访方式
				this.modeIndex = 1

				this.isShowPurposevisit = false
				this.objectIndex = null
			} else if (type == '售后服务_返厂维修') {
				this.typeList = ['客户服务', '售后服务']     //计划类型
				this.typeIndex = 1

				this.modeList = ['上门', '电话', '返厂维修']  //拜访方式
				this.modeIndex = 2

				this.isShowPurposevisit = false
				this.objectIndex = null
			}
			this.handleMode()
		},
		///////////////////////////////////////////////////////////
		//上门维修 需要携带的配件
		//去选择配件
		addParts() {
			this.$refs.partsChild.init()
		},
		selectProductParts(arr) {
			arr.forEach(ele => {
				ele.number = 1
			})
			let data = this.carryPartsList.concat(arr)
			this.carryPartsList = this.deWeight(data)
		},
		//删除 配件
		delProductParts(index) {
			this.carryPartsList.splice(index, 1)
		},
		//修改 配件 数量
		changeNumber(e, index) {
			let obj = this.carryPartsList[index]
			obj.number = e
			this.$set(this.carryPartsList, index, obj)
		},
		/////////////////////////////////////////////////////////
		//机器
		toAddPart() {
			this.$store.commit('VISIT_PLAN_REMARKS', '')
			if (!this.customerinfo) {
				uni.showToast({
					title: '请先选择客户',
					icon: 'none'
				})
				return
			}
			this.$refs.workProductOne.init(this.customerinfo.id, 3)
		},
		delParts(index) {
			this.partsList.splice(index, 1)
		},
		changePartNumber(e, index) {
			let obj = this.partsList[index]
			obj.number = e.detail
			this.$set(this.partsList, index, obj)
		},
		selectParts(arr) {
			let data = this.partsList.concat(arr)
			data.forEach(ele => {
				ele.number = 1
				ele.parts.forEach(item => {
					item.is_select = false
				})
			})
			this.partsList = this.deWeight(data)
		},
		//选择配件
		toSelectPart(index, partindex) {
			let obj = this.partsList[index]
			obj.parts[partindex].is_select = !obj.parts[partindex].is_select
			this.$set(this.partsList, index, obj)
		},
		//是否过保
		changeOver(e) {
			this.is_over = e.detail.value
		},
		changeSaleTime(e) {
			let Y = e.YYYY
			let M = e.M
			let D = e.D
			this.appointment_time = `${Y}-${M}-${D}`
		},
		//上传图片
		uploadImg(data) {
			this.imgList.push(data)
		},
		delImg(index) {
			this.imgList.splice(index, 1)
		},
		////////////////////////////////////////////////////////
		//获取 登录者 信息
		getUserinfo() {
			netLoginerInfo().then(res => {
				res = res.data.userinfo
				this.application_name = res.name
				this.application_department = res.post
			})
		},
		toSelectAchieve() {
			uni.navigateTo({
				url: '/pagesA/customerInfo/visit/achieve_goal'
			})
		},
		//选择拜访目的
		changeObject(e) {
			this.objectIndex = e.detail.value
			if (this.objectList[this.objectIndex] == '上门安装' || this.objectList[this.objectIndex] == '上门维修') {
				this.productList = []
			}
		},
		//去选择 指派员工
		toSelectStaff() {
			this.$store.commit('VISIT_PLAN_REMARKS', '')
			uni.navigateTo({
				url: '/pages/template/relation_staff'
			})
		},
		//去选择 指派员工
		toSelectReminds() {
			this.$store.commit('VISIT_PLAN_REMARKS', '')
			uni.navigateTo({
				url: '/pages/template/relation_staff1'
			})
		},
		//获取默认的客户
		getDefaultCustomer() {
			netPrevCustomer({ id: this.customerid }).then(res => {
				this.$store.commit('CUSTOMEROBJ', res.data.data[0])
			})
		},
		//去选择 标题模版
		toTitleTemp() {
			this.$store.commit('VISIT_PLAN_REMARKS', '')
			uni.navigateTo({
				url: '/pagesA/customerInfo/visit/visit_title_template'
			})
		},
		//去选择  备注 模版
		toRemarksTemp() {
			uni.navigateTo({
				url: '/pagesA/customerInfo/visit/needTemplate?type=任务备注'
			})
			// uni.navigateTo({
			// 	url:'/pages/template/visitRemark'
			// })
		},
		////////////////////////////////////////////////////////////////////////////////////////////
		//去选择  关联 客户
		toSeleCustomer() {
			this.$store.commit('VISIT_PLAN_REMARKS', '')
			uni.navigateTo({
				url: '/pages/template/relation_customer'
			})
		},
		//获取 客户 联系人
		getCustomerLink() {
			netLianxiren({ customer_id: this.customerinfo.id }).then(res => {
				this.contactsList = res.data
				this.contactsIndex = 0
			})
		},
		//选择客户 联系人
		changeContacts(e) {
			this.contactsIndex = e.detail.value
		},
		//去选择客户 地址
		chooseAddress() {
			uni.chooseLocation({
				success: res => {
					this.lat = res.latitude
					this.lng = res.longitude
					this.address = res.address
					this.address_detail = res.name
				},
				fail: err => {
					if (err.errMsg == 'chooseLocation:fail auth deny') {
						uni.showToast({
							title: '请允许使用位置信息',
							icon: 'none'
						})
					}
				}
			})
		},
		//选择 产品
		seProduct() {
			if (this.customerinfo) {
				this.$store.commit('VISIT_PLAN_REMARKS', '')
				if (this.objectList[this.objectIndex] == '上门安装') {
					this.$refs.workProductTwo.init(this.customerinfo.id, 2)
				} else {
					this.$refs.workProductTwo.init(this.customerinfo.id, 3)
				}

			} else {
				uni.showToast({
					title: '请先选择客户',
					icon: 'none'
				})
			}
		},
		selectProduct(arr) {
			let data = arr.concat(this.productList)
			this.productList = this.deWeight(data)
		},
		delProduct(index) {
			this.productList.splice(index, 1)
		},
		toSelectProductPart(index, partindex) {
			let obj = this.productList[index]
			obj.parts[partindex].is_select = !obj.parts[partindex].is_select
			this.$set(this.productList, index, obj)
		},
		////////////////////////////////////////////////////////////////////////////////////////////////////
		//计划类型
		changeType(e) {
			this.typeIndex = e.detail.value
			//选择计划类型后如果计划标题没有内容，则将计划类型回填到标题内
			this.title = this.typeList[this.typeIndex]

			this.objectIndex = null
			this.modeIndex = null
			this.handleJihua()
		},
		//根据计划类型  处理数据
		handleJihua() {
			if (this.typeIndex == 0) {
				this.isShowStaff = true
				this.modeList = ['上门']
			} else {
				this.isShowStaff = false
				this.modeList = ['上门', '电话', '返厂维修']
			}
		},
		//拜访方式
		changeMode(e) {
			this.modeIndex = e.detail.value
			if (this.modeIndex == 0) {
				this.isShowPurposevisit = true
			} else {
				this.isShowPurposevisit = false
			}

			if (this.modeList[this.modeIndex] == '返厂维修') {
				this.modeShow = true
			} else {
				this.modeShow = false
			}

			if ((this.typeList[this.typeIndex] == '售后服务') && (this.modeList[this.modeIndex] == '上门')) {
				this.isShowPurposevisit = true
				this.objectList = ['上门安装', '上门维修']
			} else if ((this.typeList[this.typeIndex] == '客户服务') && (this.modeList[this.modeIndex] == '上门')) {
				this.isShowPurposevisit = true
				this.objectList = ['认识', '报价', '签合同', '收款']
			}
		},
		handleMode() {
			if (this.modeList[this.modeIndex] == '返厂维修') {
				this.modeShow = true
			} else {
				this.modeShow = false
			}
			if (this.modeList[this.modeIndex] == '上门') {
				this.isShowPurposevisit = true

			}
		},
		//提醒时间
		changeRemind(e) {
			this.remindIndex = e.detail.value
		},
		//紧要程度
		changeCritical(e) {
			this.criticalIndex = e.detail.value
		},
		//新组建   开始时间
		changeNewStartTime(dt) {
			this.start_time = dt.f3
			this.limit_time = ''
			this.end_time = ''
			setTimeout(() => {
				let Y = dt.YYYY
				let M = dt.M
				let D = dt.D
				let h = Number(dt.h) + 1
				if (h > 24) {
					h = 1
					D = D + 1
				}
				this.limit_time = `${Y}-${M}-${D} ${h}:${dt.m}`
			}, 200)
		},
		changeNewEndTime(e) {
			this.end_time = e.f3
		},
		changeEndTime(e) {
			this.end_time = e.detail.value
		},
		toDone() {
			uni.showToast({
				title: '请先选择开始时间',
				icon: 'none'
			})
		},
		//打样////////////////////////////////////////////////////
		//申请时间
		changeData(e) {
			this.application_date = e.detail.value
		},
		//打样原因
		changeProoreason(e) {
			this.prooreasonIndex = e.detail.value
		},
		//样品提供
		changeProvision(e) {
			this.prooprovisionIndex = e.detail.value
			if (this.prooprovision[this.prooprovisionIndex] == '其他') {
				this.isShowSource = true
			} else {
				this.isShowSource = false
			}
		},
		//要求完成 时间
		changeContime(e) {
			console.log(e)
			let Y = e.YYYY
			let M = e.M
			let D = e.D
			this.completion_date = `${Y}-${M}-${D}`
		},
		//完工 样品  处理
		changeProcess(e) {
			this.prooprocessIndex = e.detail.value
		},
		//需使用设备名称
		changeEquip(e) {
			this.eqindex = e.detail.value
		},
		checkEqui(index) {
			let obj = this.equipList[index]
			obj.select = !obj.select
			this.$set(this.equipList, index, obj)
		},
		closeDevice() {
			this.$refs.partPopup.close()
		},
		//处理 选中的  设备
		handleEquip() {
			this.$refs.partPopup.close()
			let selectArr = []
			this.equipList.forEach(ele => {
				if (ele.select) {
					selectArr.push(ele)
				}
			})
			this.selectDeviList = this.deWeight(this.selectDeviList.concat(selectArr))
		},
		//删除 已选中
		delAchieve(index) {
			this.selectDeviList.splice(index, 1)
		},
		toSeleDevice() {
			let selectArr = this.selectDeviList
			let arr = [
				{ id: 1, name: '热熔胶机', select: false, device_config: '' },
				{ id: 2, name: '冷胶机', select: false, device_config: '' },
				{ id: 3, name: '双面胶铁头', select: false, device_config: '' },
				{ id: 4, name: '双面胶', select: false, device_config: '' }
			]
			selectArr.forEach(ele => {
				arr.forEach(res => {
					if (ele.id == res.id) {
						res.select = true
					}
				})
			})
			this.equipList = arr
			this.selectDeviList = selectArr
			this.$refs.partPopup.open()
		},
		///////////////////////////////////////////////////////////////////////////////////////////////
		//售后服务  上门 维修
		//出厂时间
		changeOthertime(e) {
			this.other_time = e.detail.value
		},
		//要求完成 日期
		changeCompletetime(e) {
			this.other_complete = e.detail.value
		},
		///////////////////////////////////////////////////////////////////////////////////////////////
		toAddVisit() {
			if (this.modeList[this.modeIndex] == '返厂维修') {
				this.submitRepair()
			} else if (this.objectList[this.objectIndex] == '上门安装' || this.objectList[this.objectIndex] == '上门维修') {
				this.submitShangmen()
			} else {
				this.submitTask()
			}
		},
		//售后服务  上门安装 上门维修
		submitShangmen() {
			if (!this.title) {
				uni.showToast({
					title: '请填写标题',
					icon: 'none'
				})
				return
			}
			if (!this.customerinfo) {
				uni.showToast({
					title: '请选择关联客户',
					icon: 'none'
				})
				return
			}
			if (!this.staffObj) {
				uni.showToast({
					title: '请选择指派人',
					icon: 'none'
				})
				return
			}
			//产品
			let proarr = []
			let aa = []
			this.productList.forEach((ele) => {
				proarr.push(ele.id)
				let p = []
				ele.parts.forEach(item => {
					if (item.is_select) {
						p.push(item.id)
					}
				})
				aa.push({
					customer_product_id: ele.id,
					parts_id: p.join(',')
				})
			})
			if (proarr.length == 0) {
				uni.showToast({
					title: '请选择产品',
					icon: 'none'
				})
				return
			}
			//上门维修 需要携带的 配件

			//附件
			let imgarr = []
			this.imgList.forEach(ele => {
				imgarr.push(ele.id)
			})
			let fir = this.typeList[this.typeIndex] ? this.typeList[this.typeIndex] : ''
			let sec = this.modeList[this.modeIndex] ? this.modeList[this.modeIndex] : ''
			let thr = this.objectList[this.objectIndex] ? this.objectList[this.objectIndex] : ''
			let event_type = [fir, sec, thr]

			let params = {
				title: this.title,
				event_type,
				relation_id: this.customerinfo.id,   //关联客户
				level: this.critical_list[this.criticalIndex].id,   //紧要程度
				staff_id: this.staffObj ? this.staffObj.id : '',
				start_time: this.start_time,
				end_time: this.end_time,
				remindtype: this.remindIndex,
				contacts_id: this.contactsList[this.contactsIndex].id,
				address: this.address,
				address_detail: this.address_detail,
				lng: this.lng,
				lat: this.lat,
				customer_product_id: proarr.join(','),
				file_ids: imgarr.join(','),
				appointment_time: this.end_time,
				remark: this.remark,
				product_part: aa,
			}
			if (this.objectList[this.objectIndex] == '上门维修') {
				params.is_over = this.is_over
				params.parts = this.carryPartsList
			}
			netAddVisitplant(params).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				setTimeout(() => {
					this.$store.commit('CUSTOMEROBJ', null)
					this.$store.commit('STAFFOBJ', null)
					this.$store.commit('REMINDSOBJ', null)
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			})
		},
		//售后服务  返厂维修
		submitRepair() {
			if (!this.title) {
				uni.showToast({
					title: '请填写标题',
					icon: 'none'
				})
				return
			}
			if (!this.typeList[this.typeIndex]) {
				uni.showToast({
					title: '请选择计划类型',
					icon: 'none'
				})
				return
			}
			if (!this.customerinfo) {
				uni.showToast({
					title: '请选择关联客户',
					icon: 'none'
				})
				return
			}
			if (!this.staffObj) {
				uni.showToast({
					title: '请选择指派人',
					icon: 'none'
				})
				return
			}
			if (this.partsList.length == 0) {
				uni.showToast({
					title: '请选择机器型号',
					icon: 'none'
				})
				return
			}
			if (!this.desc) {
				uni.showToast({
					title: '请填写问题描述',
					icon: 'none'
				})
				return
			}
			if (!this.matters) {
				uni.showToast({
					title: '请填写注意事项',
					icon: 'none'
				})
				return
			}
			if (!this.appointment_time) {
				uni.showToast({
					title: '请选择要求维修完成日期',
					icon: 'none'
				})
				return
			}
			//机器型号
			let arr = []
			this.partsList.forEach(ele => {
				let p = []
				ele.parts.forEach(item => {
					if (item.is_select) {
						p.push(item.id)
					}
				})
				arr.push({
					customer_product_id: ele.id,
					parts_id: p.join(',')
				})
			})
			//附件
			let imgarr = []
			this.imgList.forEach(ele => {
				imgarr.push(ele.id)
			})

			let fir = this.typeList[this.typeIndex] ? this.typeList[this.typeIndex] : ''
			let sec = this.modeList[this.modeIndex] ? this.modeList[this.modeIndex] : ''
			let thr = this.objectList[this.objectIndex] ? this.objectList[this.objectIndex] : ''
			let event_type = [fir, sec, thr]

			let params = {
				title: this.title,
				event_type,
				relation_id: this.customerinfo.id,   //关联客户
				level: this.critical_list[this.criticalIndex].id,   //紧要程度
				staff_id: this.staffObj ? this.staffObj.id : '',
				is_over: this.is_over,
				desc: this.desc,
				matters: this.matters,
				appointment_time: this.appointment_time,
				product_part: arr,
				file_ids: imgarr.join(',')
			}
			netAddVisitplant(params).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				setTimeout(() => {
					this.$store.commit('CUSTOMEROBJ', null)
					this.$store.commit('STAFFOBJ', null)
					THIS.$store.commit('REMINDSOBJ', null)
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			})
		},
		submitTask() {
			let {
				remindList,
				remindIndex,
				critical_list,
				criticalIndex,
				typeList,
				typeIndex,
				title,
				start_time,
				end_time,
				remark,
				staffObj,
				RemindsObj,
				customerinfo,
			} = this
			if (!title) {
				uni.showToast({
					title: '请填写标题',
					icon: 'none'
				})
				return
			}
			// if (!typeList[typeIndex]) {
			// 	uni.showToast({
			// 		title: '请选择计划类型',
			// 		icon: 'none'
			// 	})
			// 	return
			// }

			// if (!customerinfo) {
			// 	uni.showToast({
			// 		title: '请选择关联客户',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// if(!checkStartEnd(start_time,end_time)){
			// 	uni.showToast({
			// 		title:'预计结束时间必须大于等于开始时间',
			// 		icon:'none'
			// 	})
			// 	return
			// }
			if(!staffObj){
				uni.showToast({
					title:'请选择负责员工',
					icon:'none'
				})
				return
			}
			if(!RemindsObj){
				uni.showToast({
					title:'请选择抄送员工',
					icon:'none'
				})
				return
			}
			let fir = typeList[typeIndex] ? typeList[typeIndex] : ''
			let sec = this.modeList[this.modeIndex] ? this.modeList[this.modeIndex] : ''
			let thr = this.objectList[this.objectIndex] ? this.objectList[this.objectIndex] : ''
			// let event_type = [fir, sec, thr]

			let params = {
				title,
				// relation_id: customerinfo.id,
				start_time,
				end_time,
				remark,
				level: critical_list[criticalIndex].id,
				remindtype: 0,
				// type: 1,
				staff_id: staffObj ? staffObj.id : '',
				reminds_id: RemindsObj ? RemindsObj.id : '',
				// event_type,
			}
			netAddVisitplant(params).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				setTimeout(() => {
					this.$store.commit('CUSTOMEROBJ', null)
					this.$store.commit('STAFFOBJ', null)
					this.$store.commit('REMINDSOBJ', null)
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			})
		},
	}
}
</script>
<style lang="scss" scoped>
.product_li {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.icon-jian {
		font-size: 42rpx;
		color: #ff7800;
	}

	.protext {
		font-size: 24rpx;
		color: #333;
		width: 200rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		.priceinput {
			width: 180rpx;
			font-size: 24rpx;
			color: #333;
		}
	}
}

.que_list {
	border-bottom: 1rpx solid #EDEDED;
	padding: 0 45rpx 0 50rpx;

	.que_li {
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #EDEDED;

		&:last-child {
			border-bottom: 0;
		}

		.icon-jian {
			font-size: 40rpx;
			color: #ff7800;
			margin-right: 30rpx;
		}

		.que_title {
			font-size: 24rpx;
			color: #333;
			width: 110rpx;
		}

		.deviinput {
			background: rgba(202, 202, 202, 0.2);
			width: 410rpx;
			height: 80rpx;
			border-radius: 10rpx;
			padding: 10rpx;
			box-sizing: border-box;
			margin-left: 24rpx;
		}
	}
}

.equi_box {
	width: 750rpx;
	background: #fff;

	.scrollbox {
		width: 750rpx;
		height: 700rpx;
	}

	.equi_list {
		padding: 40rpx;

		.equi_li {
			padding: 24rpx 35rpx;
			background: #fff;
			border-radius: 10rpx;
			box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(0, 0, 0, 0.2);
			font-size: 24rpx;
			color: #333;
			margin-bottom: 24rpx;

			radio {
				transform: scale(0.7);
				margin-right: 30rpx;
			}
		}
	}

	.bot_warp {
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		padding-bottom: 20rpx;
		border-top: 1rpx solid #EDEDED;

		.bot_btn {
			width: 220rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			background: $uni-text-color;
		}

		.remove {
			background: #fff;
			border: 1rpx solid $uni-text-color;
			color: $uni-text-color;
			line-height: 58rpx;
		}
	}
}

.radiowarp {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	radio {
		transform: scale(0.7);
	}
}

.imglist {
	padding: 24rpx 34rpx;
	background: #fff;
	border-bottom: 1rpx solid #EDEDED;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	.imgbox {
		width: 160rpx;
		height: 160rpx;
		margin-right: 14rpx;
		position: relative;
		margin-bottom: 24rpx;
		border: 1rpx solid #EDEDED;

		&:nth-child(4n) {
			margin-right: 0;
		}

		.delimg {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			position: absolute;
			right: -16rpx;
			top: -16rpx;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}

		.selfimg {
			width: 160rpx;
			height: 160rpx;
		}
	}
}

.prolist {
	background-color: #fff;
	border-bottom: 1rpx solid #EDEDED;
	padding: 30rpx;

	.ptotitle {
		font-size: 26rpx;
		color: #333;
	}

	.probox {

		// padding:0 24rpx;
		.proli {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #EDEDED;

			&:last-child {
				border-bottom: 0;
			}

			.product_li {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.icon-jian {
					font-size: 42rpx;
					color: #ff7800;
				}

				.protext {
					font-size: 24rpx;
					color: #333;
					width: 200rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;

					.priceinput {
						width: 180rpx;
						font-size: 24rpx;
						color: #333;
					}
				}
			}

			.part_li {
				padding: 0 24rpx;
				display: flex;
				justify-content: flex-start;
				margin-top: 24rpx;
				flex-wrap: wrap;

				.partbox {
					flex-shrink: 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 24rpx;
					color: #333;
					margin-right: 24rpx;

					radio {
						transform: scale(0.7);
					}
				}
			}
		}
	}
}

.test_top {
	width: 100%;
	height: 60rpx;
	background: rgba(0, 142, 255, 0.2);

	.tip {
		font-size: 26rpx;
		color: $uni-text-color;
		padding-left: 60rpx;
		line-height: 60rpx;
		position: relative;

		&::before {
			content: '';
			width: 20rpx;
			height: 35rpx;
			border-radius: 10rpx;
			background: $uni-btn-bg-color;
			position: absolute;
			left: 30rpx;
			top: 15rpx;
		}
	}
}

.fir_warp {
	padding: 30rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #EDEDED;

	.firinput {
		width: 450rpx;
		font-size: 26rpx;
		color: #333;
	}

	.fir_text {
		font-size: 26rpx;
		color: $uni-text-color;
	}
}

.inp_warp {
	padding: 30rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #EDEDED;

	.inp_title {
		font-size: 26rpx;
	}

	.form_right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #999;
		min-width: 450rpx;
		text-align: right;

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 28rpx 5rpx 0 0;
		}

		.rightinput {
			width: 100%;
			text-align: right;
		}

		.right_btn {
			font-size: 24rpx;
			color: $uni-text-color;
		}
	}

	.add_in {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 26rpx;
		color: $uni-text-color;

		.icon-jiahaocu {
			font-size: 28rpx;
			color: $uni-text-color;
			margin-right: 5rpx;
		}
	}
}

.fllow_area {
	background: #fff;
	padding: 30rpx;
	border-bottom: 1rpx solid #EDEDED;

	.fllo_list {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.area_head {
			margin-bottom: 20rpx;
			font-size: 26rpx;
			color: #666;
		}

		.list_text {
			font-size: 26rpx;
			color: $uni-text-color;
		}
	}

	textarea {
		width: 660rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		margin: 24rpx auto;
		box-sizing: border-box;
		font-size: 26rpx;
		background: rgba(202, 202, 202, 0.2);
	}
}

.fllow_form {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	border-bottom: 1rpx solid #EDEDED;
	padding: 30rpx;

	.form_right {
		display: flex;
		align-items: center;
		color: #999;
		text-align: right;

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 28rpx 5rpx 0 0;
		}
	}
}
</style>
